@import url(base.less);

.flex {
  display: flex;
  justify-content: space-between;
}

.ellipsis-2 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

header {
  .header-info {
    height: 12.3vw;
    padding: 0 3.2vw 0 4.8vw;
    .logo {
      font-size: 7.6vw;
      color: @base_main_color;
    }
    .header-info-right {
      align-items: center;
      .search {
        margin: 1vw 5.8vw 0 0;
        font-size: 5.8vw;
        color: #ccc;
      }
      .login {
        margin-right: 5.8vw;
        width: 6.4vw;
        height: 6.4vw;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .downloadAPP {
        img {
          width: 19.2vw;
        }
      }
    }
  }
  nav {
    border-bottom: 0.2667vw solid #eee;
    height: 10vw;
    line-height: 10vw;
    .tabs {
      flex: 1;
      overflow: hidden;
      .tabs-list {
        position: relative;
        a {
          padding: 0 4vw;
          color: #505050;
          white-space: nowrap;
        }
      }
    }
    .after {
      box-sizing: border-box;
      width: 13vw;
      padding-right: 2.1333vw;
      text-align: right;
      color: #aaa;
      i {
        font-size: 5.3vw;
      }
    }
    .line {
      position: absolute;
      bottom: 0;
      left: 4vw;
      width: 7.4667vw;
      height: 0.5333vw;
      border-radius: 1.3333vw;
      background-color: @base_main_color;
    }
  }
}

main {
  padding: 0 2.1333vw;
  .home-video {
    flex-wrap: wrap;
    a {
      box-sizing: border-box;
      width: 50%;
      height: 40vw;
      padding: 2.13333vw 1.33333vw;
      .card {
        position: relative;
        width: 45.8667vw;
        height: 25.8667vw;
        img {
          width: 100%;
          height: 100%;
        }
        .count {
          box-sizing: border-box;
          position: absolute;
          width: 100%;
          bottom: 0;
          padding: 0 1vw;
          font-size: 3.2vw;
          color: #fff;
          background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
        }
      }
      p {
        margin-top: 1.55vw;
        font-size: 3.2vw;
      }
    }
    .more {
      width: 100%;
      padding: 4vw 0;
      font-size: 3.8vw;
      text-align: center;
      color: #999;
    }
  }
}

footer {
  line-height: 6.9333vw;
  padding: 4vw 0;
  font-size: 3.2vw;
  text-align: center;
  color: #9499a0;
  background-color: #f4f4f4;
}

.openApp {
  position: fixed;
  bottom: 8vw;
  left: 50%;
  transform: translateX(-50%);
  width: 93vw;
  height: 10vw;
  line-height: 10vw;
  text-align: center;
  color: #fff;
  border-radius: 5.0667vw;
  background-color: @base_main_color;
  box-shadow: 0 0.53333vmin 2.66667vmin rgb(0 0 0 / 20%);
  i {
    margin-right: 3vw;
  }
}
